<template>
  <div>
    <van-nav-bar title="优惠券中心" left-text="返回" left-arrow @click-left="onClickLeft"/>
  </div>
  <van-tabs v-model:active="active" @change="onClickTab">
    <van-tab title="可领取" name="1"/>
    <van-tab title="已过期" name="2"/>
  </van-tabs>
  <!-- 优惠券列表 -->
  <div v-if="couponInfList.length === 0">
    <p>暂时还没有优惠卷哦</p>
  </div>
  <div class="coupon-div" v-else v-for="item of couponInfList" :key="item.id">
    <div class="coupon-item">
      <div class="coupon-header">
        <span class="coupon-title">{{ item.name }}<span>【{{ item.userTypeName }}】</span></span>
        <span class="coupon-status">{{ item.userStatusName }}<span>【{{ item.overlayName }}】</span></span>
      </div>
      <div class="coupon-body">
        <p class="coupon-description"><span>
            <span
                style="color: #CFAE00;font-size: 32px;font-weight: 600">满{{ item.couponCondition.condition }}￥
            </span>
            <span style="font-size: 20px;">
              {{ item.typeName }}{{ item.couponCondition.faceValue }}
            </span>
          </span>
        </p>
        <p class="coupon-expire-date">剩余：{{ item.times }}张 &nbsp;&nbsp;&nbsp;
          <span class="coupon-expire-date">总换条件：{{ item.point }}积分</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button v-if="item.status == 1" type="success" plain style="display: inline"
                     @click="userGetCoupon(item.id)">点击领取
          </el-button>
          <el-button v-if="item.status == 2" type="info" plain style="display: inline">已过期</el-button>
        </p>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <div style="width: 100%;height:100px;display: flex;
  justify-content: center;align-items: center;
    position: absolute;bottom: -43px;">
    <div class="example-pagination-block" style="height: 50px;">
      <el-pagination layout="prev, pager, next"
                     :current-page="queryM.pageNum"
                     :page-size="queryM.pageSize"
                     :total="queryM.total"
                     @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import {CouponList, GetCoupon,} from '@/api/market.js'
import {showToast} from "vant";

var couponInfList = ref([])
let active = ref(0)
var queryM = ref({
  pageNum: 1,
  pageSize: 20,
  expireType: 0,
  status: 1,
  total: 0
})

// 切换状态
function onClickTab() {
  queryM.value.status = active.value
  getCouponInfExpired()
}

const onClickLeft = () => history.back();
// 定义领取优惠卷的对象
const couponInf = ref({
  id: null
})


// 添加
function userGetCoupon(data) {
  couponInf.value.id = data
  GetCoupon(couponInf.value)
      .then(res => {
        console.info("领取优惠券" + res)
        if (res.data.code == 200000) {
          showToast('领取成功');
          getCouponInfExpired()
        } else {
          showToast(res.data.errorMessage);
        }
      })
}

function handleCurrentChange(page) {
  queryM.value.pageNum = page
  getCouponInfExpired()
}

function getCouponInfExpired() {
  CouponList(queryM.value)
      .then(res => {
        console.log(1111)
        console.log(res.data)
        if (res.data.code == 200000) {
          couponInfList.value = res.data.data.records
          queryM.value.total = res.data.data.total
          console.log(res.data.data)
        } else {
          //错误提示框
        }
      })
}

</script>
<style scoped>
.expired .coupon-cell {
  background-color: #999;
  opacity: 0.7;
}

:deep(.van-cell) {
  background: transparent;
  padding: 0;
}

:deep(.van-cell__title) {
  flex: 1;
}

.coupon-div {
  width: 100%;
  height: 130px;
}

.coupon-div {
  width: 100%;
  margin-top: 10px;
}

.coupon-item {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: red;
}

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon-title {
  font-size: 16px;
  font-weight: bold;
}

.coupon-status {
  font-size: 14px;
  color: black;

}

.coupon-body {
  margin-top: 5px;
}

.coupon-description {
  font-size: 14px;
  color: black;
}

.coupon-expire-date {
  font-size: 12px;
  color: black;
  margin-top: 5px;
}

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}

</style>